<!--
 * @Description: 我的
 * @Author: yangxq
 * @Date: 2019-09-09 20:16:14
 * @LastEditTime: 2019-09-16 17:20:53
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="mine-wrap">
    <div class="topNavs">
      <van-nav-bar title="我的"
                   left-arrow
                   @click-left="$router.go(-1)" />
    </div>
    <div class="mine-box">
      <div class="top-bg"></div>
      <div class="address-wrap">
        <img src="../../assets/img/tx.png">
        <div class="address">
          <h3>{{jiedao }}</h3>
          <p>{{detailAddress}}</p>
        </div>
      </div>
      <div class="van-cell  edlt-mine"
           @click="modePassWord">
        <div class="van-cell__title">
          <i class="left-icon"></i>
          <span>修改密码</span></div>
        <i class="van-icon van-icon-arrow van-cell__right-icon">
          <!----></i>
      </div>
    </div>
    <div class="loginBtn-wrap">
      <button class="notBlind"
              @click="logOutByOpenId">解除微信绑定</button>
    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      user: "",
      openId: "",
      jiedao: "街道",
      detailAddress: "地址"
    }
  },

  mounted () {
    this.user = JSON.parse(localStorage.getItem("user"));
    this.openId = localStorage.getItem("openId");
    this.jiedao = this.user.agencyName;
    this.detailAddress = this.user.districtInfo;
  },
  methods: {
    modePassWord () {
      this.$router.push({ name: 'findPassWord', params: { type: "2" } })//1 忘记密码 2 修改密码
    },
    //解除微信绑定
    logOutByOpenId () {
      let params = {
        phone: this.user.phone,
        openId: this.openId
      };
      this.$http.post("logOutByOpenId", params).then((res) => {
        if (res.data.code == "success") {
          console.log(res);


        } else {
          console.log(res);
        }
      }).catch(function (error) {
        console.log(error);
      })


    },
  }
}
</script>

<style lang="scss" >
@import "@/assets/css/common.scss";

.mine-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #eaeaea;
  .mine-box {
    background: #fff;
    padding-bottom: 0.01rem;
    position: relative;
    .top-bg {
      position: absolute;
      width: 100%;
      height: 1.45rem;
      z-index: 0;
      background: $theme-color;
      border-bottom-left-radius: 15px;
      border-bottom-right-radius: 15px;
    }
  }
  .address-wrap {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 85%;
    margin: 0 auto;
    background: #3e3e3e;
    border-radius: 0.3rem;
    padding: 0.3rem;
    display: flex;
    align-items: center;
    img {
      height: 1.6rem;
      width: 1.6rem;
      border-radius: 100%;
    }
    .address {
      margin-left: 15px;
      font-size: 0.43rem;
      color: #fff;
      line-height: 0.4;
      h3 {
        color: $theme-color;
      }
      p {
        font-size: 0.38rem;
      }
    }
  }
  .edlt-mine {
    position: relative;
    width: 85%;
    margin: 0 auto;
    padding: 0;
    margin: 0.5rem auto;
    display: flex;
    align-items: center;
    .left-icon {
      background: url("../../assets/img/yzm.png") center no-repeat;
      background-size: contain;
      width: 0.53rem;
      height: 0.53rem;
      margin-right: 10px;
    }
    .van-cell__title {
      text-align: left;
      align-items: center;
      display: flex;
      font-size: 0.44rem;
    }
  }
  .notBlind {
    background: $theme-color;
    width: 80%;
    height: 1rem;
    line-height: 1rem;
    border: 0 none;
    border-radius: 0.5rem;
    font-weight: bold;
    position: fixed;
    bottom: 1rem;
    left: 10%;
    font-size: 0.46rem;
  }
}
</style>